// 源插件
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Form } from 'antd';
// 引入编辑器组件
import BraftEditor from 'braft-editor';
import Table from 'braft-extensions/dist/table';
// 引入编辑器样式
import 'braft-editor/dist/index.css';
import 'braft-extensions/dist/table.css';
// 外部组件
// css OR less预编译器

import styles from './All.less';
// 图片
/**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 */
const options = {
  defaultColumns: 3, // 默认列数
  defaultRows: 3, // 默认行数
  withDropdown: true, // 插入表格前是否弹出下拉菜单
  exportAttrString: '', // 指定输出HTML时附加到table标签上的属性字符串
  includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
  excludeEditors: ['editor-id-2'], // 指定该模块对哪些BraftEditor无效
};

@connect(({ mail, loading }) => ({
  mail,
  loading: loading.models.mailRule,
}))
@Form.create()
class Braft extends PureComponent {
  componentWillMount() {}

  state = {};

  componentDidMount() {
    // 假设此处从服务端获取html格式的编辑器内容
    // const htmlContent = await fetchEditorContent();
    // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
    // this.setState({
    //   editorState: BraftEditor.createEditorState(htmlContent)
    // })
  }

  preview = () => {
    if (window.previewWindow) {
      window.previewWindow.close();
    }

    window.previewWindow = window.open();
    window.previewWindow.document.write(this.buildPreviewHtml());
    window.previewWindow.document.close();
  };

  buildPreviewHtml() {
    return `
      <!Doctype html>
      <html>
        <head>
          <title>Preview Content</title>
          <style>
            html,body{
              height: 100%;
              margin: 0;
              padding: 0;
              overflow: auto;
              background-color: #f1f2f3;
            }
            .container{
              box-sizing: border-box;
              width: 1000px;
              max-width: 100%;
              min-height: 100%;
              margin: 0 auto;
              padding: 30px 20px;
              overflow: hidden;
              background-color: #fff;
              border-right: solid 1px #eee;
              border-left: solid 1px #eee;
            }
            .container img,
            .container audio,
            .container video{
              max-width: 100%;
              height: auto;
            }
            .container p{
              white-space: pre-wrap;
              min-height: 1em;
            }
            .container pre{
              padding: 15px;
              background-color: #f1f1f1;
              border-radius: 5px;
            }
            .container blockquote{
              margin: 0;
              padding: 15px;
              background-color: #f1f1f1;
              border-left: 3px solid #d1d1d1;
            }
            table{ 
              border-collapse:collapse;border:none;
            }
            table tr td{
              border:solid #333 1px;
              padding:  10px;
              /*text-align: center;*/
            }
          </style>
        </head>
        <body>
          <div class="container">${this.state.editorState.toHTML()}</div>
        </body>
      </html>
    `;
  }

  commitBraft() {
    const { dispatch, message, fileList } = this.props;
    const formData = new FormData();
    fileList.forEach(file => {
      formData.append('files[]', file);
    });

    dispatch({
      type: 'mail/SendHtmlWithAtc',
      payload: {
        mailModelType: 1,
        // ccs:message.ccs,
        // subject:message.subject,
        // tos:message.tos,
        // mfs:formData,
        // content:btoa(encodeURI(this.buildPreviewHtml ())),
        content: this.buildPreviewHtml(),
      },
    });
    this.buildPreviewHtml();
  }

  render() {
    const {} = this.state;
    return (
      <div>
        <div className={styles.tableList}>
          <table border="1" style={{ borderCollapse: 'collapse' }}>
            <tr>
              <th colSpan="1" rowSpan="1" align="left">
                期权
              </th>
              <th colSpan="1" rowSpan="1" align="center">
                年期
              </th>
              <th colSpan="1" rowSpan="1" align="center">
                现价
              </th>
              <th colSpan="1" rowSpan="1" align="center">
                行使价
              </th>
              <th colSpan="1" rowSpan="1" align="right">
                权利金（%USD）
              </th>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left" contentEditable="true">
                client sell USD put CHF call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                1month
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                <select>
                  <option>11111</option>
                  <option>2222</option>
                </select>
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.20%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put CHF call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                2month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.40%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put JPY call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                1month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.20%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put JPY call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                2month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.40%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put EUR call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                1month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.20%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put EUR call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                2month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.40%
              </td>
            </tr>

            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put AUD call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                1month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.20%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put AUD call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                2month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.40%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put CAD call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                1month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.20%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put CAD call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                2month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.40%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put SGD call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                1month
              </td>
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.20%
              </td>
            </tr>
            <tr>
              <td colSpan="1" rowSpan="1" align="left">
                client sell USD put SGD call
              </td>
              <td colSpan="1" rowSpan="1" align="center">
                2month
              </td>
              <td colSpan="/1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="center" />
              <td colSpan="1" rowSpan="1" align="right">
                0.40%
              </td>
            </tr>
          </table>
          <br />
        </div>
      </div>
    );
  }

  componentWillUnmount() {}
}

export default Braft;
